<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>骡窝日报详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="/css/strategyComment.css" />
		<link rel="stylesheet" href="/css/reset.css">
		<link rel="stylesheet" href="/css/newsContent.css">
		<link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
		<script src="/js/plugins/dialog/dialog.min.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
		<script src="/js/plugins/jrender/jrender.js"></script>
		<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
		<script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
		<script src="/js/common.js"></script>

		<script>
            //更改颜色的方法
            function change() {
                if ($("#msg").val()){
                    $(".submitBtn").css("background-color","#da765b");
                }else {
                    $(".submitBtn").css("background-color","#74787c");
                }
            }

            var id = getParams().id;
            var users = sessionStorage.getItem('user');
            user = JSON.parse(users);
            $(function () {
                $(function () {
                    //游记评论
                    //判断用户是否登录,如果登录则可以点评,反之跳转回首页登录
                    if (sessionStorage.getItem('user') == null) {
                        $(".submitBtn").confirm({
                            title: '温馨提示',
                            content: '亲,您需要登录才能评价哦',
                            buttons: {
                                跳转回首页: function () {
                                    window.location.href = "/index.html";
                                },
                                取消: function () {
                                },
                            }
                        })
                    } else {
                        $(".submitBtn").click(function () {
                            var msg = $("#msg").val();
                            if (msg) {
                                $.post("/news/newscomment/" + id, {
                                    content: msg,
                                    "userId": user.id,
                                    "news.id": id
                                }, function (data) {
                                    if (data.success) {
                                        location.reload();
                                    }
                                })
                            } else {
                            }
                        })
                    }
                });
            })

			function commends(data) {
                $(".newsContent").renderValues(data);
                //显示推荐日报的封面，类型，发布时间
                $.get("/news/commends/"+data.typeId, {pageSize: 6, id: data.id}, function (data) {
                    $("#carouselExampleControls").renderValues({list:data},{
                        handle:function (ele,value) {
                            ele.href = "/newsContent.html?id=" + value;
                        }
                    })
                    $("#newsCommends>div:first").addClass("active");
                });
            }

			$(function () {
                /*var height = $(window).width();
                $(".content").css("width", height);*/
                var user = JSON.parse(sessionStorage.getItem("user"));
                console.log(user);
                var id = getParams().id;
                if(user){
                    var userId = user.id;
                }

                //判断是否有id
                if(id) {
                    //判断是否用户是否存在
                    if (user != null){
                        //显示日报封面，类型，日报内容
                        $.get("/news/" + id, function (data) {
                            commends(data);

                        //==========================================
                            //判断状态是否收藏，改变收藏状态以及小心心显示
                            if (data.state == 1){
                                //取消收藏
                                $("#newsState").click(function () {
                                    $.ajax({
                                        url:"/news/"+id,
                                        data:{state: 0, userId: userId},
                                        type:"PUT",
                                        success: function (data) {
                                            console.log(data);
                                            $(document).dialog({
                                                type:"confirm",
                                                style:"IOS",
                                                titleShow:false,
                                                content:"取消收藏",
                                                buttons:[{
                                                    name:"返回页面",
                                                    callback:function () {
                                                        window.location.href = "/newsContent.html?id=" + id;
                                                    }
                                                }]
                                            })
                                        }
                                    });
                                })
                                //小心心变红
                                $("#newsState.fa").removeClass("fa-heart-o")
                                    .addClass("fa-heart").css("color", "red");
                                //状态为未收藏时
                            } else if (data.state == 0){
                                //收藏日报
                                $("#newsState").click(function () {
                                    $.ajax({
                                        url:"/news/"+id,
                                        data:{state: 1, userId: userId},
                                        type:"PUT",
                                        success: function (data) {
                                            console.log(data);
                                            $(document).dialog({
                                                type:"confirm",
                                                style:"IOS",
                                                titleShow:false,
                                                content:"收藏成功",
                                                buttons:[{
                                                    name:"返回页面",
                                                    callback:function () {
                                                        window.location.href = "/newsContent.html?id=" + id;
                                                    }
                                                }]
                                            })
                                        }
                                    })
                                })
                                //小心心变空
                                $("#newsState.fa").removeClass("fa-heart")
                                    .addClass("fa-heart-o");
                            }
                        });
                    } else {
                        //显示日报封面，类型，日报内容
                        $.get("/news/" + id, function (data) {
                            commends(data);

                            //==========================================
                            //判断状态是否收藏，改变收藏状态以及小心心显示
                            if (data.state == 1){
                                //小心心变红
                                $("#newsState.fa").removeClass("fa-heart-o").addClass("fa-heart").css("color", "red");
                            //状态为未收藏时
                            } else if (data.state == 0){
                                //小心心变空
                                $("#newsState.fa").removeClass("fa-heart").addClass("fa-heart-o");
                            }

                            //点击小心心
                            $("#newsState").click(function () {
                                $(document).dialog({
                                    type: 'confirm',
                                    style:"IOS",
                                    titleShow:false,
                                    content: '亲,需要登录才能收藏',
                                    onClickConfirmBtn: function () {
                                        window.location.href = "/login.html";
                                    }
                                });
                            })
                        });
                    }


                    //==============================================================

                };
                var state = 0;
                var id = getParams().id;
                if (id) {
                    $.get("/travels/" + id, function (data) {
                        console.log(data);
                        $(".travels").renderValues(data);
                    }, "json");
                }
                var user = JSON.parse(sessionStorage.getItem("user"));
                if (user) {//登录才会显示点赞效果
                    $.get("/praise/" + user.id, {"typeId": id, "type": 3}, function (data) {
                        state = data.state;
                        if (data.state == 1) {
                            $("#likeBtn").removeClass("fa-thumbs-o-up");
                            $("#likeBtn").addClass("fa-thumbs-up");
                        } else {
                            $("#likeBtn").removeClass("fa-thumbs-up");
                            $("#likeBtn").addClass("fa-thumbs-o-up");
                        }
                    });
                }

                //点击评论按钮跳转到评论界面
                $("#commentBtn").click(function () {
                    $("#commentBtn").removeClass("fa fa-commenting-o");
                    $("#commentBtn").addClass("fa fa-commenting");
                    window.location.href = "/travelComment.html?id=" + id;
                })

                //获取当前日报下面的点评
                $.get("/news/" + id +"/comment",function (data) {
                    console.log(data);
                    //回显点评
                    setTimeout(300);
                    $("#comments").renderValues(data,{
                        userHandler:function (ele,value) {
                            ele.href="/userProfiles.html?id="+value;
                        },
                    });
                })

            })
		</script>
		<style>
			#inputDiv {
				height: 45px;
				width: 100%;
				background-color: #eeeeee;
				position: fixed;
				bottom: 0;
			}
			.submitBtn {
				background-color: #a6b4bc;
				color: white;
				width: 100%;
			}

			.commentofcomment .row{
				margin-bottom: 20px;
			}


			.commentofcomment-date{
				color: #BBBBBB;
				margin-left: 20px;
			}

			.commentofcomment p,.commentofcomment span{
				font-size: 13px;
			}



			.commentofcomment-head img{
				width: 100%;
			}


			@media screen and (max-width: 600px) {
				.commentofcomment-head img {
					width: 130%;
				}
			}

			.follow{
				font-size: 11px;
				padding: 0px 15px;
				margin-left: 15px;
				background: white;
				border: #787a7d solid 1px;
				float: right;
				color: #46484a;
			}

			.authorName{
				margin: 0px;
			}

			.commentofcomment-content {
				margin: 0px;
				padding: 0px;
			}
			.commentofcomment-content p{
				padding: 0px;
				margin: 5px auto 12px ;
			}

			.commentofcomment,.commentofcomment-right{
				padding-right: 0px;
			}

			.tab-pane{
				margin-bottom: 50px;
			}

			.icon{
				float: right;font-size: 10px;
				color: #46484a;
				margin-bottom: 10px;
				margin-top: 5px;
			}
		</style>
	</head>

	<body>
		<div class="newsDetail">
			<div >
				<a href="javascript:history.go(-1);" style="position: absolute;top: 10px;left: 22px;">
					<span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
				</a>

                <div class="newsContent">
                    <img render-src="coverUrl">
                    <div class="container">
                        <div class="row typeRow">
                            <div class="col-4">
                                <span class="type" render-html="typeName"></span>
                            </div>
                            <div class="col-2">
								<span >
								<i id="newsState" class="fa fa-heart-o"></i></span>
                            </div>
                            <div class="col-2">
                                <span>By</span>
                            </div>
                            <div class="col-4">
                                <span class="type">骡窝官方</span>
                            </div>
                        </div>

                        <div class="detail">
                            <h2 class="title" render-html="title"></h2>
                            <div class="content" render-html="newsContent.content" width="100%" height="200px">
                            </div>
                        </div>
                    </div>
                </div>
                <hr>

                <div class="container">
                    <h6 class="module-title">相关推荐</h6>
                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                        <div>
                            <div id="newsCommends" class="carousel-inner" render-loop="list">
                                <div class="carousel-item">
                                    <div class="border commend">
                                        <a role="button" render-key="list.id" render-fun="handle">
                                            <img class="d-block w-100"  render-src="list.coverUrl" width="100%" height="200px">
                                            <h6 render-html="list.title"></h6>
                                            <h6 render-html="list.typeName"></h6>
                                            <h6 render-html="list.releaseTime"></h6>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only"></span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only"></span>
                        </a>

                    </div>
                </div>
			<hr>
			<br>
			<div id="comments">
				<div render-loop="list">
					<div class="container row comment">
						<div class="col-4 comment-head">
							<a href="userProfiles.html" render-key="list.user.id">
								<img class="rounded-circle"
									 render-src="list.user.headImgUrl">
							</a>
						</div>
						<div class="col comment-right">
							<p class="authorName"><span render-html="list.user.nickName"></span>
								<span class="comment-date" render-html="list.releaseTime"></span>
								<div class="comment-content">
									<a render-key="list.id">
							<p render-html="list.content">
							<div class="d-flex icon">
								<i class="fa fa-thumbs-o-up"> <span>0</span> </i>
							</div>
							</p>
							</a>
						</div>
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="comment-list" style="color: lightgrey">
			快来发表你的评论吧
		</div>

		<div id="inputDiv">
			<div class="row nav-search">
				<div class="col-9">
					<div class="input-group-sm search">
						<input id="msg" class="form-control searchBtn" placeholder="在这里进行评论哦" style="padding-top: 5px" oninput="change()">

					</div>
				</div>

				<div class="col-3">
					<div class="input-group-sm search">
						<button type="button" class="btn btn-sm badge-pill submitBtn">发送</button>
					</div>
				</div>

				<!--<div class="col-3">
                    <div class="p-1" ><i class="fa fa-star-o" style="color: black"></i> 收藏</div>
                </div>-->
			</div>
		</div>
        </div>
</body>
</html>